<template>
	<view class="container">
		<custom-navbar title="发布新帖" :showBack="true"></custom-navbar>
		
		<view class="main-content" :style="{paddingTop: navbarTotalHeight + 'px'}">
			<view class="form-container">
				<!-- 标题输入 -->
				<view class="form-group">
					<text class="form-label">帖子标题</text>
					<input 
						class="title-input" 
						placeholder="请输入帖子标题" 
						v-model="postData.title" 
					/>
				</view>
				
				<!-- 内容输入 -->
				<view class="form-group">
					<text class="form-label">帖子内容</text>
					<textarea 
						class="content-input" 
						placeholder="分享你的想法..." 
						v-model="postData.content"
						maxlength="500"
						auto-height
					></textarea>
				</view>
				
				<!-- 图片上传 -->
				<view class="form-group">
					<text class="form-label">添加图片</text>
					<view class="image-grid">
						<view 
							class="image-item" 
							v-for="(img, index) in postData.images" 
							:key="index"
						>
							<image class="selected-image" :src="img" mode="aspectFill"></image>
							<view class="delete-image" @tap="removeImage(index)">
								<image class="delete-icon" src="https://img.icons8.com/ios-filled/50/delete-sign.png" mode="aspectFit"></image>
							</view>
						</view>
						
						<view class="add-image" @tap="chooseImage" v-if="postData.images.length < 4">
							<image class="add-icon" src="https://img.icons8.com/ios/50/plus.png" mode="aspectFit"></image>
							<text class="add-text">添加图片</text>
						</view>
					</view>
					<text class="tip-text">最多可添加4张图片</text>
				</view>
				
				<!-- 发布选项 -->
				<view class="form-group">
					<text class="form-label">发布设置</text>
					<view class="option-item">
						<text class="option-text">允许评论</text>
						<switch class="option-switch" :checked="postData.allowComment" @change="toggleComment"/>
					</view>
					<view class="option-item">
						<text class="option-text">匿名发布</text>
						<switch class="option-switch" :checked="postData.anonymous" @change="toggleAnonymous"/>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部发布按钮 -->
		<view class="publish-container" :style="{paddingBottom: safeAreaBottom + 'px'}">
			<view class="publish-btn" @tap="publishPost" :class="{disabled: !canPublish}">
				<text class="publish-text">发布帖子</text>
			</view>
		</view>
	</view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue';

export default {
	components: {
		CustomNavbar
	},
	data() {
		return {
			navbarTotalHeight: 132,
			statusBarHeight: 44,
			safeAreaBottom: 0,
			postData: {
				title: '',
				content: '',
				images: [],
				allowComment: true,
				anonymous: false
			}
		}
	},
	computed: {
		canPublish() {
			return this.postData.title.trim().length > 0;
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 44;
		this.navbarTotalHeight = this.statusBarHeight + 44;
		this.safeAreaBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
	},
	methods: {
		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 4 - this.postData.images.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.postData.images = this.postData.images.concat(res.tempFilePaths);
				}
			});
		},
		
		// 删除图片
		removeImage(index) {
			this.postData.images.splice(index, 1);
		},
		
		// 切换评论设置
		toggleComment(e) {
			this.postData.allowComment = e.detail.value;
		},
		
		// 切换匿名设置
		toggleAnonymous(e) {
			this.postData.anonymous = e.detail.value;
		},
		
		// 发布帖子
		publishPost() {
			if (!this.canPublish) {
				uni.showToast({
					title: '请输入帖子标题',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '发布中...'
			});
			
			// 模拟发布请求
			setTimeout(() => {
				uni.hideLoading();
				
				uni.showToast({
					title: '发布成功',
					icon: 'success'
				});
				
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}, 2000);
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.main-content {
	padding: 20rpx;
}

.form-container {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.form-group {
	margin-bottom: 40rpx;
}

.form-group:last-child {
	margin-bottom: 0;
}

.form-label {
	display: block;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 15rpx;
}

.title-input {
	width: 100%;
	min-height: 80rpx;
	padding: 20rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	box-sizing: border-box;
	line-height: 1.5;
}

.title-input:focus {
	border-color: #667eea;
}

.content-input {
	width: 100%;
	min-height: 200rpx;
	padding: 20rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	box-sizing: border-box;
	line-height: 1.5;
}

.content-input:focus {
	border-color: #667eea;
}

.char-count {
	display: block;
	text-align: right;
	font-size: 22rpx;
	color: #999;
	margin-top: 10rpx;
}

/* 图片上传 */
.image-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
	margin-bottom: 15rpx;
}

.image-item {
	position: relative;
	width: 150rpx;
	height: 150rpx;
}

.selected-image {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}

.delete-image {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	width: 30rpx;
	height: 30rpx;
	background: #ff4757;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.delete-icon {
	width: 18rpx;
	height: 18rpx;
}

.add-image {
	width: 150rpx;
	height: 150rpx;
	border: 2rpx dashed #ccc;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #f8f9fa;
}

.add-icon {
	width: 40rpx;
	height: 40rpx;
	margin-bottom: 10rpx;
	opacity: 0.6;
}

.add-text {
	font-size: 22rpx;
	color: #666;
}

.tip-text {
	font-size: 22rpx;
	color: #999;
}

/* 发布选项 */
.option-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.option-item:last-child {
	border-bottom: none;
}

.option-text {
	font-size: 28rpx;
	color: #333;
}

.option-switch {
	transform: scale(0.8);
}

/* 底部发布按钮 */
.publish-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	padding: 20rpx;
	border-top: 1rpx solid #e5e5e5;
	z-index: 1000;
}

.publish-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50rpx;
	padding: 30rpx;
	text-align: center;
	box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
}

.publish-btn.disabled {
	background: #ccc;
	opacity: 0.6;
	box-shadow: none;
}

.publish-text {
	font-size: 32rpx;
	color: #ffffff;
	font-weight: bold;
}
</style>